<template>
    <div class="app-container" v-loading="loadings">
        <el-row>
            <el-col :span="4">
                <div class="marginTB alignRight labelLeft">余额</div>
            </el-col>
            <el-col :span="20">
                <div class="marginTB conl fl cons">
                    <span class="red">{{avlBal}}</span>
                    元
                </div>
            </el-col>
            <el-col :span="4">
                <div class="marginTB alignRight labelLeft fontSize14">充值金额</div>
            </el-col>
            <el-col :span="20">
                <div class="marginBB">
                    <el-input
                        type="number"
                        v-model="form.amount"
                        style="width:160px"
                        @blur="amountFn"
                        placeholder="请输入充值金额"
                    ></el-input>
                    <span class="color">元</span>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="marginTB alignRight labelLeft fontSize14">充值方式</div>
            </el-col>
            <el-col :span="20">
                <div class="marginTB">
                    <el-radio v-model="form.radio" label="AL">支付宝支付</el-radio>
                    <el-radio v-model="form.radio" label="WX">微信支付</el-radio>
                    <el-radio v-model="form.radio" label="YL">银联二维码支付</el-radio>
                </div>
            </el-col>
            <el-col :span="24">
                <el-button
                    style="display: table;margin: 0 auto;margin-top: 40px;"
                    type="primary"
                    @click="toRoutes('codePay',form)"
                >下一步</el-button>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import withdrawal from "@/api/withdrawal";
export default {
    name: "changeMoneyIndex",
    data() {
        return {
            loadings: true,
            avlBal: "12138.00",
            form: {
                amount: null,
                radio: "AL"
            }
        };
    },
    inject: ["reload"],
    mounted() {
        this.getWithdrawalInfo();
    },
    methods: {
        // 获取余额
        getWithdrawalInfo() {
            let datas = {
                id: String(this.$store.state.user.hospitalId)
            };
            withdrawal
                .getWithdraw(datas)
                .then(res => {
                    if (!res.data.code) {
                        let resData = res.data.data;
                        this.avlBal = Number(resData.avlBal);
                    } else {
                        this.$message({
                            showClose: true,
                            message: res.data.msg,
                            type: "warning"
                        });
                    }
                    this.loadings = false;
                })
                .catch(err => {
                    this.errorStatus(err);
                    this.loadings = false;
                });
        },
        //金额处理
        amountFn() {
            let tfa = Number(this.form.amount).toFixed(2);
            if (Number(tfa) <= 0) {
                this.form.amount = null;
            } else {
                this.form.amount = tfa;
            }
        },
        // 路由跳转
        toRoutes(e, userId) {
            let route = {
                name: e,
                query: { userId: JSON.stringify(userId) }
            };
            if (Number(this.form.amount) > 999999.99) {
                this.form.amount = "999999.99";
                this.errorStatus("单次充值不允许超过100万元");
            } else {
                if (this.form.amount && this.form.radio) {
                    this.$router.push(route);
                } else {
                    this.errorStatus("充值金额为必填项");
                }
            }
        },
        //成功状态弹窗
        succStatus(txt, status) {
            this.eleMsg(txt, "success");
        },
        //失败状态弹窗
        errorStatus(txt) {
            this.eleMsg(txt, "error");
        },
        //弹窗组件
        eleMsg(txt, status) {
            this.$message({
                showClose: true,
                message: txt,
                type: status
            });
        }
    }
};
</script>
<style scoped>
.labelLeft {
    margin-right: 20px !important;
    color: #606266;
    font-weight: 700;
}
.marginTB {
    margin: 10px 0;
    color: #606266;
}
.conl,
.conr {
    width: 50%;
    display: inline-block;
}
.fontSize14 {
    font-size: 14px;
}
.red {
    color: red;
}
.titlep {
    font-size: 12px;
    color: #606266;
    margin-top: 8px;
    margin-bottom: 20px;
}
.color {
    color: #606266;
}
.radioCon > div:first-child {
    margin-top: 0;
}
.cons {
    margin-bottom: 40px;
}
.marginBB {
    margin-bottom: 20px;
}
</style>